<template>
	<view :class="currentTheme">
		<a-nabbar name="DM详情" />
		<u-swiper height="634" :list="bannerList" @click="bannerListPreview"></u-swiper>
		<view class="padding-env">
			<view class="theme u-padding-top-16">
				<list-item :isImage="false" :item="item" :padding="20" :isList="false" :starSize="30" >
					<!-- <text slot="user" class="u-margin-left-18 fans"
						@click="fansDetail(item)">Ta的粉丝团 {{item.fansGroupCount || 0}}</text> -->
					<view slot="content"></view>
					<view slot="footer"></view>
					<view slot="name" class="u-flex-1 u-flex" style="width: 0;">
						<view class="box-title  text-bold u-font-36 u-line-1 item-name">
							{{item.nickname || ''}}
						</view>
						<text class="u-margin-left-18 u-margin-right-20 fans"
							@click="fansDetail(item)">Ta的粉丝团 {{item.fansGroupCount || 0}}</text>
					</view>
				</list-item>
			</view>
			<view class="u-margin-top-12 u-padding-32">
				<view class="u-font-28 box-title u-margin-bottom-22">所属门店</view>
				<view v-for="(c,b) in item.systemStores" :key="b" class="u-margin-top-20" @click="goPathDetail(c)">
					<list-item :item="c" :isShare="false" width="214" height="188" :isTag="false">
						<view slot="content" style="width: 100%;">
							<view class="store-larp-list u-font-20 u-margin-top-20 text-order-time">{{c.storeProducts | storeProductsFilter}}</view>
							<!-- <view class="store-address u-font-20 box-title u-margin-top-20">门店地址：{{c.address}}
							</view> -->
							<contact :item="c" :showStatus="false"></contact>
						</view>
						<view slot="footer"></view>
					</list-item>
				</view>
				<empty v-if="item.systemStores&&item.systemStores.length==0"></empty>
				<view class="u-font-28 box-title u-margin-bottom-22 u-margin-top-20">Ta能开的本</view>
				<item-box :padding="0">
					<view v-for="(c) in item.storeProducts" :key="c.id" class="u-margin-top-20">
						<list-item :item="c" :isShare="false" width="202" height="328" :showTime="false">
							<view slot="footer">
								<view class="u-margin-top-30 u-font-24 text-order-time">发行者:{{c.createName}}</view>
							</view>
							<view slot="footer" class="u-flex u-row-between">
							</view>
						</list-item>
					</view>
					<empty v-if="item.storeProducts&&item.storeProducts.length==0"></empty>
				</item-box>
				<view class="u-margin-top-20 u-margin-bottom-20">
					<item-box :padding="0">
						<view class="u-flex   u-row-between u-padding-32">
							<view class="">
								<text class="box-title u-font-32">Ta的评价</text>
								<text class="box-title u-font-24 u-margin-left-24"
									v-if="replyListTotal>0">{{replyListTotal}}条</text>
							</view>
							<view class="text-color-txtTheme u-font-26" @click="moreReply" v-if="replyListTotal!==0">
								查看更多 <u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						<view class="u-border-top">
							<view class="u-padding-32">
								<template v-if='replyList.length'>
									<reply-item v-for="(item,index) in replyList" :key="index" :item="item">
									</reply-item>
								</template>
								<empty v-else :option="{tip:'暂无门店评价记录'}"></empty>
								<!-- <view class="u-text-center u-font-28 text-color-DEDEDE" v-else>暂无DM评价记录</view> -->
							</view>
						</view>
					</item-box>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDetail,
		customRequest
	} from '@/api/crud.js'
	import {
		mapGetters
	} from 'vuex'
	import empty from '@/components/mescroll-uni/components/mescroll-empty.vue'
	import replyItem from '@/components/replyItem/replyItem.vue'
	import contact from '@/pagesA/acomponents/contact/contact.vue'
	export default {
		components: {
			empty,
			replyItem,contact
		},
		data() {
			return {
				apiModule: 'shopApi',
				item: {},
				option: [],
				replyList: [],
				replyListTotal: 0
			};
		},
		computed: {
			bannerList() {
				return this.item.showPic ? this.splitStr(this.item.showPic).map(this.imgFilter) : [
					'https://larp-gbo.oss-cn-chengdu.aliyuncs.com/wx/julie.png'
				]
			},
			...mapGetters(['loginForm']),
		},
		async onShow() {
			await getDetail(this.option, 'systemStoreUser', this.apiModule, 'getDetailByUid').then(data => {
				data.showPic = data.user.showPic;
				data.categoryDescription = data.user.personalLabel;
				this.item = data
				this.$u.mpShare = {
					title: data.nickname,
					imageUrl: this.imgFilter(data.img)
				}
			})
			await getDetail({
				dmUid: this.item.uid,
				size: 5,
				//storeId:option.storeId
			}, 'systemStoreUserComment', 'shopApi', 'getSystemStoreUserComments').then(data => {
				this.replyList = data.content.map(val => {
					//val.score = val.productScore
					val.imgs = val.image.split(',')
					return val;
				});
				this.replyListTotal = data.totalElements
			})
		},
		onLoad(option) {
			this.option = option
		},
		methods: {
			fansDetail(item) {
				this.$u.route({
					url: `/pages/follow/index`,
					params: {
						userType: 'store',
						type: 'DM',
						storeId: item.storeId,
						uid: item.user.uid,
					}
				})
			},
			goPathDetail(item) {
				this.$u.route({
					url: `/pagesA/rankingList/storeDetail`,
					params: {
						id: item.id
					}
				})
			},
			splitStr(str) {
				return str && str.split(',') || []
			},
			//预览
			bannerListPreview(index) {
				uni.previewImage({
					current: index,
					urls: this.bannerList
				})
				this.previewUrls(this.bannerList, index)
			},
			btnClick() {
				const chatName = this.item.nickname;
				const id = this.item.user.hxUsername;
				this.toChatPath({
					name: chatName,
					id,
					uid: this.item.user.uid
				})
			},
			moreReply(){
					this.$u.route({
					url: "/pagesA/replyManager/replyManager",
					params: {
						label: 'DM评价',
						type: 'DM',
						dmUid: this.item.uid
					}
				})
			}
		},
		filters: {
			storeProductsFilter(list) {
				return Array.isArray(list) && list.map(val => `《${val.name}》`).join(' ');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fans {
		font-size: 18rpx;
 		background:linear-gradient(to right,#765cfe,#ac5cfe);
 		color: #FCFCFC;
		border-radius: 6rpx;
		padding: 10rpx 0;
		flex: 0 0 150rpx;
		width: 150rpx;
		text-align: center;
	}
	.store-larp-list{
		line-height: 30rpx;
	}
	.scroll-view-list {
		height: 400rpx;
	}

	.padding-env {
		padding-bottom: calc(env(safe-area-inset-bottom) + 50px)
	}

	.theme {
		background: var(--stepper-button-disabled-color);
	}

	.scroll-view-item {
		width: 160rpx;
		margin: 18rpx auto;
	}

	.subscribe {
		width: 143rpx;
		text-align: center;
		color: white;
		font-size: 20rpx;
		line-height: 46rpx;
		background: var(--primary-color);
		border-radius: 23px;
	}
</style>
